<template>
    <view>
        <view>Swiper 轮播图示例：</view>
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item>
                <!-- <view class="swiper-item">第一页</view> -->
				<image src="/static/pic/swiper/zr1.jpg"></image>
            </swiper-item>
            <swiper-item>
                <!-- <view class="swiper-item">第二页</view> -->
				<image src="/static/pic/swiper/zr2.jpg" mode=""></image>
            </swiper-item>
            <swiper-item>
                <!-- <view class="swiper-item">第三页</view> -->
				<image src="/static/pic/swiper/zr3.jpg" mode=""></image>
				
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style>
  swiper {
        height: 400rpx;
		width: 100%;
        margin-top: 20rpx;
		background-color: brown;
    }
    
    .swiper-item {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
    }
    
    /* 为每个页面添加不同背景色便于区分 */
   swiper-item:nth-child(1) .swiper-item {
        background-color: #e3f2fd;
    }
    
    swiper-item:nth-child(2) .swiper-item {
        background-color: #f3e5f5;
    }
    
    swiper-item:nth-child(3) .swiper-item {
        background-color: #e8f5e8;
    }
</style>